<template>
  <div class="yd-collapse">
    <div class="collapse-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { provide, reactive, toRefs, watch } from "vue";
export default {
  name: "Collapse",
  props: {
    modelValue: {},
    accordion: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    // provide("accordion", props.accordion);
    const state = reactive({
      parentModel: props.modelValue
    });
    const handleUpdate = (name, expand) => {
      if (props.accordion) {
        state.parentModel = expand ? name : "";
      } else {
        expand &&
          !state.parentModel.includes(name) &&
          state.parentModel.push(name);

        !expand &&
          state.parentModel.map((v, i) => {
            v == name && state.parentModel.splice(i, 1);
          });
      }

      state.parentModel = JSON.parse(JSON.stringify(state.parentModel));
      ctx.emit("update:modelValue", state.parentModel);
    };

    watch(
      () => props.modelValue,
      val => {
        state.parentModel = props.modelValue;
        ctx.emit("change", val);
      }
    );

    return {
      ...toRefs(state),
      handleUpdate
    };
  }
};
</script>

<style lang="scss" scoped>
.yd-collapse {
  font-size: 14px;
  color: #333;
  .collapse-container {
    border-top: 1px solid #ebeef5;
  }
}
</style>